<%
var title="门户管理";
layout("/layouts/blank.html",{title:title}){
%>
<style type="text/css">
    .fixedClear:after {
        content: '.';
        height: 0;
        overflow: hidden;
        height: 0px;
        clear: both;
    }

    .fixedClear {
        *zoom: 1
    }

    .required {
        color: red;
    }

    #fnConfig, #dispatcherPeo {
        display: none;
    }

    .caption {
        float: left;
    }

    .save {
        float: right;
        height: 28px;
        line-height: 28px;
        padding: 0 30px;
        font-size: 16px;
    }
    .autoHeight:after{
        clear: both;
        content: " ";
        display: block;
    }
</style>
<section class="content-header">
    <h1>
        ${title}
        <!--<small>控制面板</small>-->
    </h1>
</section>
<section class="content" id="container" style="height: 100%">
    <div class="col-sm-8" style="min-width: 150px;">
        <div class="top_bar">
            <%if(so.hasPermission("portal.save")){%>
            <div class="layui-btn layui-btn-sm layui-btn-normal" @click="fn_editGroup(1)">新增组合</div>
            <div class="layui-btn layui-btn-sm layui-btn-normal" @click="fn_editGroup(2)">修改</div>
            <%}%>
            <%if(so.hasPermission("portal.del")){%>
            <div class="layui-btn layui-btn-sm layui-btn-normal" @click="fn_del(1)">删除</div>
            <%}%>
        </div>
        <div>
            <%if(so.hasPermission("portal.query")){%>
            <div id="groupListTable" lay-filter='groupListTable'></div>
            <%}%>
        </div>
    </div>
    <div class="col-sm-4" style="min-width: 150px;height: 100%;">
        <div class="col-sm-10" style="min-width: 150px;height: 100%"  id="fnConfig">
            <div class="top_bar fixedClear autoHeight">
                <h3 class="caption">当前组合: &nbsp;{{groupName}}</h3>
                <div class="layui-btn layui-btn-sm layui-btn-normal save"
                     @click="save('protalTree')">保存
                </div>
            </div>
            <div style="min-width: 15px;height: calc(100% - 28px);overflow-y: auto">
                <div id="protalTree" class="ztree"></div>
            </div>
        </div>
        <div class="col-sm-10" style="min-width: 150px;height: 100%" id="dispatcherPeo">
            <div class="top_bar fixedClear autoHeight">
                <h3 class="caption">当前组合: &nbsp;{{groupName}}</h3>
                <div class="layui-btn layui-btn-sm layui-btn-normal save"
                     @click="save('userTree')">保存
                </div>
            </div>
            <div style="min-width: 15px;height: calc(100% - 28px);overflow-y: auto">
                <div id="userTree" class="ztree"></div>
            </div>
        </div>
    </div>
    <div id="editBox" style="display: none;padding: 15px">
        <input type="hidden" v-model="groupData.id">
        <div class="form-group">
            <label>组合编号<span class="required">*</span></label>
            <input type="text" v-model="groupData.groupCode" class="form-control input-sm" placeholder="组合编号">
        </div>
        <div class="form-group">
            <label>组合名称<span class="required">*</span></label>
            <input type="text" v-model="groupData.groupName" class="form-control input-sm" placeholder="组合名称">
        </div>
    </div>
</section>
<script type="text/html" id="toolBarFixed">
    <%if(so.hasPermission("portal.tree")){%>
    <div class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">功能配置</div>
    <%}%>
    <!--暂无权限,记得加权限-->
    <div class="layui-btn layui-btn-sm layui-btn-normal" lay-event="editpeople">分配人员</div>
</script>
<script type="text/javascript">
    var selectId;
    var vm = new Vue({
        el: "#container",
        data: {
            groupData: {},
            groupListGrid: "",
            groupId: null,
            groupName: '', //角色名称
            treeType: {
                protalTree: null,
                userTree: null
            },
            caption: ''
        },
        methods: {
            fn_loadGroupList: function () {
                layui.use(['table'], function () {
                    var table = layui.table;
                    vm.groupListGrid = table.render({
                        id: 'groupListTable',
                        elem: '#groupListTable',
                        page: true,
                        method: 'post',
                        url: base + '/portal/query',
//                        height: 'full-130',
                        limit: 50,
                        even: true,
                        request: {
                            pageName: 'pageNum',
                            limitName: 'pageSize',
                        },
                        cols: [[
                            {type: 'checkbox'},
                            {title: '序号', type: 'numbers', align: 'center'},
                            {field: 'groupCode', title: '组合编号', align: 'center'},
                            {field: 'groupName', title: '组合名称', align: 'center'},
                            {title: '操作', align: 'center', toolbar: '#toolBarFixed'},
                        ]],
                    });
                    table.on("tool(groupListTable)", function (obj) {
                        if (!$(this).hasClass("layui-btn-disabled")) {
                            var data = obj.data, layEvent = obj.event;
                            vm.groupName = data.groupName;
                            vm.groupId = data.id;
                            if (obj.event == "edit") {
                                var jsonre = core.postJSON("/portal/getSelectedIds", {id: data.id});
                                selectId = jsonre.data;
                                vm.treeType.protalTree = reloadPortalTree({
                                    el: '#protalTree',
                                    url: '/portal/tree',
                                    data: {id: "id", pid: "pid", name: "name"},
                                    autoParam: ["id"],
                                    selectedIds: selectId
                                });
                                $('#fnConfig').css('display', 'block');
                                $('#dispatcherPeo').css('display', 'none');
                                vm.treeType.userTree && vm.treeType.userTree.remove();
                            }
                            ;
                            if (obj.event === 'editpeople') {
                                var jsonre = core.postJSON("/portal/getSelectedUserIds", {groupId: data.id});
                                selectId = jsonre.data;
                                vm.treeType.userTree = reloadPortalTree({
                                    el: '#userTree',
                                    url: '/portal/userTree',
                                    data: {id: "id", pid: "pid", name: "name", iconSkin: 'iconSkin'},
                                    autoParam: ["id"],
                                    selectedIds: selectId
                                });
                                $('#fnConfig').css('display', 'none');
                                $('#dispatcherPeo').css('display', 'block');
                                vm.treeType.protalTree && vm.treeType.protalTree.remove();
                            }
                        }
                    });
                });
            },
            fn_editGroup: function (status) {
                if (status == 2) {
                    var checkStatus = layui.table.checkStatus("groupListTable");
                    if (checkStatus.data.length == 0) {
                        core.error("请先选择要修改的组合!")
                        return;
                    } else if (checkStatus.data.length > 1) {
                        core.error("每次只能修改一个组合!")
                        return;
                    } else {
                        vm.groupData = checkStatus.data[0];
                    }
                }
                layer.open({
                    scrollbar: false,
                    type: 1,
                    title: status == 1 ? "新增组合" : "修改组合",
                    area: ['400px', '280px'],
                    content: $("#editBox"),
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        var fromData = core.convertDataJSON(vm.groupData);
                        var jsonre = core.postJSON("/portal/save", fromData);
                        core.msg(jsonre);
                        if (jsonre.ok) {
                            vm.groupData = {};
                            vm.groupListGrid.reload();
                            layer.close(index);
                        } else {
                        }
                    }
                });
            },
            fn_del: function () {
                var checkStatus = layui.table.checkStatus("groupListTable");
                if (checkStatus.data.length == 0) {
                    core.error("请先选择要删除的组合!")
                    return;
                } else {
                    core.confirm("删除后无法恢复!<br>确定删除组合?", function () {
                        var ids = [];
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            ids[i] = checkStatus.data[i].id;
                        }
                        var jsonre = core.postJSON("/portal/del", {ids: ids.join(",")});
                        core.msg(jsonre);
                        if (jsonre.ok) {
                            vm.groupListGrid.reload();
                        }
                    })

                }
            },
            save: function (treeType) {
                var checks = [],
                    obj = {},
                    url = '',
                    item = {},
                    params = {},
                    data = vm.treeType[treeType].getCheckedData();

                for (var i = data.length; i--;) {
                    item = data[i];
                    if (item.isParent)
                        continue;
                    obj = treeType === 'protalTree' ? {
                        id: item.id,
                        pid: item.pid
                    } : item.id;
                    checks.push(obj);
                }
                ;
                //userIds: checks.join(',')
                if (treeType === 'protalTree') {
                    params = {
                        groupId: this.groupId,
                        ids: JSON.stringify(checks)
                    };
                    url = '/portal/saveGroupFunction';
                } else {
                    params = {
                        groupId: this.groupId,
                        userIds: checks.join(',')
                    };
                    url = '/portal/savePortalUsers';
                }
                ;
                var jsonre = core.postJSON(url, params);
                core.msg(jsonre);
            }
        },
        mounted: function () {
            this.fn_loadGroupList();
        }
    })

    function reloadPortalTree(options) {
        return new showZtree({
            el: options.el,
            url: options.url,
            data: options.data,
            autoParam: options.autoParam,
            isCheckbox: true,
            selectedIds: options.selectedIds || [],
            onSelect: options.onSelect || function () {
            },
            onCheck: options.onCheck || function () {
            },
        });
    }

    function hideCheckbox(node) {
        node.nocheck = true;
        node.chkDisabled = true;
        return node;
    };
</script>
<%}%>